<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/x-icon" href="../../images/logo.png">
    <title>酒店监测</title>
    <!-- 下拉框 -->
    <link rel="stylesheet" href="../../plugin/M_select/js/M_select/M_select.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/hotelMonitoring.css">
</head>

<body>
    <div class="box">
        <!-- 头部 -->
        <div class="header-box">
                <img src="../../images/headeBg.png" alt="">
                <div class="weather-box">
                    <span>郑州 小雨转多云 32/16℃</span>
                </div>
                <h1 class="header-title"><img src="../../images/header.png" alt=""></h1>
                <div class="header-action">
                    <span class="action-time"></span>
                    <a href="javascript:;">管理中心</a>
                    <a href="javascript:;">退出</a>
                </div>
            </div>
        <div class="main-box">
            <!-- 侧边导航 -->
            <ul class="aside-box">
                    <li>
                        <a href="../home.html">
                            <span>
                                <img class="aside-img" src="../../images/home.png" alt="">
                                <img class="aside-imgA " src="../../images/homeA.png" alt="">
                                首页
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../surroundings/development.html">
                            <span>
                                <img class="aside-img" src="../../images/huanjing.png" alt="">
                                <img class="aside-imgA" src="../../images/huanjingA.png" alt="">
                                产业发展环境
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../basic/basic.html">
                            <span>
                                <img class="aside-img" src="../../images/yaosu.png" alt="">
                                <img class="aside-imgA" src="../../images/yaosuA.png" alt="">
                                产业基础要素
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../passengerFlow/destination.html">
                            <span>
                                <img class="aside-img" src="../../images/keliu.png" alt="">
                                <img class="aside-imgA" src="../../images/keliuA.png" alt="">
                                旅游客流监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../productTesting/index.html">
                            <span>
                                <img class="aside-img" src="../../images/chanpin.png" alt="">
                                <img class="aside-imgA" src="../../images/chanpinA.png" alt="">
                                旅游产品监测
                            </span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="./scenicMonitor.html">
                            <span>
                                <img class="aside-img" src="../../images/qiye.png" alt="">
                                <img class="aside-imgA" src="../../images/qiyeA.png" alt="">
                                旅游企业监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../tourismProject/index.html">
                            <span>
                                <img class="aside-img" src="../../images/xiangmu.png" alt="">
                                <img class="aside-imgA" src="../../images/xiangmuA.png" alt="">
                                旅游项目监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../brand/brand.html">
                            <span>
                                <img class="aside-img" src="../../images/pinpai.png" alt="">
                                <img class="aside-imgA" src="../../images/pinpaiA.png" alt="">
                                旅游品牌监测
                            </span>
                        </a>
                    </li>
                </ul>
            <!-- 主题内容 -->
            <div class="content-box">
                <div class="content-nav-box">
                    <a href="scenicMonitor.html">景区监测 </a>
                    <a href="travelAgency.html">旅行社监测</a>
                    <a class="active" href="#">酒店监测</a>
                    <a href="villageMonitoring.html">旅游乡村监测</a>
                </div>
                <div class="main-content-box">
                   <div class="left-box">
                       <div class="check-box">
                           <div>
                               <h4>今日入住数（人次）</h4>
<!--                               <i>-->
<!--                                   <b>0</b><b>0</b><b>5</b><b>8</b>,-->
<!--                                   <b>5</b><b>6</b><b>2</b>-->
<!--                                </i>-->
                             <div class="numberStyle">0058,232</div>
                                <p>今日入住率98%</p>
                           </div>
                           <div>
                                <h4>今日入住数（人次）</h4>
<!--                                <i>-->
<!--                                    <b>1</b><b>2</b><b>3</b><b>8</b>,-->
<!--                                    <b>1</b><b>4</b><b>3</b>-->
<!--                                 </i>-->
                             <div class="numberStyle">12345,890</div>
                                 <p>今日入住率98%</p>
                            </div>
                       </div>
                       <div class="echarts-box" id="map"></div>
                   </div>
                   <div class="right-box">
                       <div class="overnight-box flex">
                           <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png">
                                    过夜游客分析
                                </h3>
                            </div>
                            <div class="echarts-box" id="overnight"></div>
                            <div class="radio-box">
                                <input checked name="overnight" type="radio" id="monthlyOvernight">
                                <label for="monthlyOvernight">
                                    <i></i><span>月度</span>
                                </label>
                                <input type="radio" id="yearOvernight" name="overnight">
                                <label for="yearOvernight"><i></i><span>年度</span></label>
                            </div>
                       </div>
                       <div class="overnight-data">
                            <div class="flex">
                                <div class="title-box">
                                    <h3>
                                        <img src="../../images/titile-img.png">
                                        过夜游客分析<i> TOP10↑</i>
                                    </h3>
                                </div>
                                <div class="echarts-box" id="overnightSource"></div>
                            </div>
                            <div class="flex">
                                <div class="title-box">
                                    <h3>
                                        <img src="../../images/titile-img.png">
                                        过夜停留时长
                                    </h3>
                                </div>
                                <div class="echarts-box" id="overnightDuration"></div>
                            </div>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../plugin/jquery-1.11.1.min.js"></script>
<script src="../../plugin/ECharts/echarts.js"></script>
<script src="../../plugin/ECharts/china.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/jquery.leoTextAnimate.js"></script>
<script src="../../js/hotelMonitoring.js"></script>
<script>
  $('.numberStyle').leoTextAnimate({
    delay: 1000, //延时出现时间
    autorun: true, //是否自动运行
    fixed: [',', ':', '.'], //
    start: '0'
  })
</script>
</html>
